<script setup lang="ts">
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { init, graphic } from '../echarts-utils.ts';
import type { ECOption } from '../echarts-utils.ts';

const chart = ref<HTMLElement>();

function createData() {
  const date = new Date();
  const data = [];
  for (let i = 0; i < 30; i++) {
    const random = Math.floor(Math.random() * 1000);
    data.push([date.getTime() + i * 24 * 3600 * 1000, random]);
  }
  return data;
}

function initChart() {
  const myChart = init(chart.value);
  const data = createData();
  myChart.setOption({
    xAxis: {
      type: 'time',
      boundaryGap: false,
      axisTick: { show: true },
      splitLine: { show: false },
      axisLine: { show: true },
      axisLabel: {
        formatter: (value: number) => {
          const date = new Date(value);
          return date.getMonth() + 1 + '/' + date.getDate();
        }
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: false,
      axisTick: { show: true },
      splitLine: { show: false },
      axisLine: { show: true }
    },
    series: [
      {
        type: 'line',
        data,
        smooth: true,
        lineStyle: { width: 0 },
        showSymbol: false,
        areaStyle: {
          opacity: 0.9,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 122, 254, 0.6)' },
            { offset: 1, color: 'rgba(0, 122, 254, 0)' }
          ])
        }
      }
    ],
    grid: {
      left: 0,
      right: '3%',
      bottom: 0,
      top: '8%',
      containLabel: true // 包含刻度线在内
    }
  } as ECOption);
}

onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="cb fit column">
    <Title title="未来30天游客量趋势"></Title>
    <div class="col chart" ref="chart"></div>
  </div>
</template>

<style scoped lang="scss">
.cb {
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  .chart {
    margin-top: 20px;
  }
}
</style>
